import React, { useState, useEffect } from 'react';
import './index.less';
import { host } from '../utils/utils';
import {
    Table,
    Image,
} from 'antd';
import { request } from 'umi';

const LogList = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [listData, setListData] = useState([]);
    const [loading, setloading] = useState(false);
    const [saveId, setSaveId] = useState(0);
    const [pageData, setPageData] = useState({
        pageSize: 10,
        current: 1,
        total: 0,
    });

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            wdith: 80,
        },
        {
            title: '关键字',
            dataIndex: 'keyword',
            key: 'keyword',
            wdith: 300,
        },
        {
            title: '微信昵称',
            dataIndex: 'user_name',
            key: 'user_name',
        },
        {
            title: '微信头像',
            key: 'head_pic',
            dataIndex: 'head_pic',
            width: 110,
            render: (text, record) => {
                return (
                    <Image.PreviewGroup>
                        <Image
                            width={100}
                            height={100}
                            src={text}
                        />
                    </Image.PreviewGroup>
                );
            },
        },
        {
            title: '发送时间',
            key: 'create_time',
            dataIndex: 'create_time',
        },
    ];

    const getList = (page) => {
        request(`${host}/v1.0/api/key/logList`, {
            method: 'get',
            params: {
                page: page,
            },
        }).then((res) => {
            if (res.code == 200) {
                setListData(res.data.data);
                setPageData({
                    pageSize: 10,
                    current: res.data.current_page,
                    total: res.data.total,
                });
                setloading(false);
            }
        });
    };

    useEffect(() => {
        getList(1);
    }, []);

    return (
        <Table
            columns={columns}
            dataSource={listData}
            rowKey="id"
            loading={loading}
            pagination={{
                pageSize: pageData.pageSize,
                current: pageData.current,
                total: pageData.total,
                showSizeChanger:false,
                onChange: (page) => {
                    setloading(true);
                    getList(page);
                },
            }}
        />
    );
};

export default LogList;
